<template>
	<view class="main-container">
		<view class="tabs">
			<view v-for="(item, index) in customerStoreCouponStatusList" @click="selectcoupon(index, item)" :key="index"
				class="header-item" :class="{ active: index == selectTable }">
				{{ item.Description }}
			</view>
		</view>
		<view v-if="customerCouponList.length > 0" class="main-coupon-container">
			<coupon-info v-for="(item, index) in customerCouponList" :key="index" :couponDetail="item"
				class="coupon-detail-main" @clickItem="clickItem(item)"></coupon-info>
		</view>
		<view v-else class="sell-container">
			<view class="empty"><text>抱歉！没有找到符合条件的优惠券</text></view>
		</view>
	</view>
</template>

<script>
	import couponInfo from '@/packagePages/mine/coupon/components/couponInfo.vue';
	import {
		getCustomerStoreCouponStatus,
		getCustomerAllNewCouponsById
	} from '@/constant/customer.js';
	import {
		log
	} from 'util';
	// import axios from 'axios'
	export default {
		components: {
			couponInfo
		},
		data() {
			return {
				customerCouponList: [],
				customerStoreCouponStatusList: [{
					Description: '全部',
					value: ''
				}, {
					Description: '已使用',
					value: 1
				}, {
					Description: '未使用',
					value: 0
				}],
				TotalNumber: 0,
				selectTable: 0,
				query_filter: {
					pageNum: 1,
					pageSize: 10, 
					isUsed: '',
					receiverId:uni.getStorageSync('customerId'),
					reasonable:false,
				}
			};
		},
		onLoad() {
			this.getCustomerAllNewCouponsById();
		},
		onReachBottom() {
			this.getCustomerAllNewCouponsById();
		},
		onPullDownRefresh() {
			this.initData()
		},
		methods: {
			initData() {
				this.query_filter.pageNum = 1;
				this.customerCouponList = [];
				this.getCustomerAllNewCouponsById();
			},
			async getCustomerStoreCouponStatus() {
				this.customerStoreCouponStatusList = await getCustomerStoreCouponStatus({});
			},
			selectcoupon(index, item) {
				this.selectTable = index;
				this.query_filter.isUsed = item.value;
				this.initData();
			},
			getCustomerAllNewCouponsById() {
				uni.request({
					// url: 'http://192.168.0.124:8091/client/storeCoupon/myCoupon', //测试
					url: 'http://192.168.0.99:8091/client/storeCoupon/myCoupon', //测试
					// url: 'https://lvanpai.whle.cn/green_serve/client/storeCoupon/myCoupon', //正式
					method: 'POST',
					data: this.query_filter,
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.code === 0) {
							let new_list = []
							new_list = res.data.rows
							let tem_list = []
							if (new_list.length > 0) {
								new_list.forEach((item, index) => {
									tem_list.push(item)
								})
								new_list = tem_list

								this.query_filter.pageNum = this.query_filter.pageNum + 1
								this.customerCouponList = this.customerCouponList.concat(new_list)
							}
						} else {
							if (this.customerCouponList.length > 0) {
								uni.showToast({
									title: '已加载所有',
									icon: 'none'
								})
							}
						}

					},
					fail: (err) => {
					}
				});
			},
			clickItem(item) {
				if (item.isUsed == 1) {
					return;
				}
				uni.navigateTo({
					url: './couponParamDetail?couponId=' + item.id
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.main-container {
		background-color: $main-page-color;
		height: 100vh;
	}

	.coupon-detail-main {
		width: 100%;
		height: 210rpx;
		margin-bottom: 20rpx;
	}

	.tabs {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		color: #000;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		background: #fff;

		.header-item {
			min-width: 200rpx;
		}

		view {
			flex: 1;
			text-align: center;
		}

		.active {
			color: $main-text-color-orange-FCC309;
			border-bottom: 2px solid $main-btn-orange-color-FCC309;
		}
	}

	.empty {
		height: 320rpx;
		line-height: 320rpx;
		text-align: center;
		color: #b5b5b7;
		width: 750rpx;
	}

	// .main-container-header {
	// 	background: #fdf5ea;
	// 	color: #ef365b;
	// 	font-size: 30rpx;
	// 	text-align: center;
	// 	height: 40px;
	// 	line-height: 40px;
	// 	border-bottom: 1px solid #f5f6fd;
	// }

	.main-coupon-container {
		display: flex;
		flex-wrap: wrap;
		padding: 40rpx 20px;
		justify-content: space-between;
		background-color: #f5f6fd;
	}
</style>